<template>
  <div>
    <el-card class="box-card">
      <div class="input_box">
        <el-input
          placeholder="请输入内容"
          class="in"
          clearable
          v-model="Goods.query"
          @input="onearch"
        >
        </el-input>
        <div class="button">
          <el-button icon="el-icon-search"></el-button>
        </div>

        <div class="add">
          <el-button type="primary" @click="onClickAdd">添加用户</el-button>
        </div>
      </div>
      <div class="table">
        <el-table border :data="commoditylist" style="width: 100%">
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="800">
          </el-table-column>
          <el-table-column prop="goods_price" label="商品价格(元)" width="100">
          </el-table-column>
          <el-table-column prop="upd_time" label="创建时间" width="123">
            <template slot-scope="scope">
              <div class="time">
                {{ scope.row.upd_time | dateTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="onClickRemove(scope.row)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-message"
                size="mini"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Goods.pagenum"
            :page-sizes="[5, 10, 20, 25]"
            :page-size="Goods.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(this.total)"
          >
          </el-pagination>
        </div>
        <!-- 编辑弹框 -->

        <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
          <span>
            <el-form
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :model="addForm"
            >
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="addForm.goods_name"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ConfirmEdit">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import _ from "lodash";
import { Goodslist, DeleteGoods, EditGoods } from "../../http/api";
export default {
  data() {
    return {
      total: "",
      Goods: {
        pagenum: 1,
        pagesize: 5,
        query: "",
      },
      commoditylist: [],
      addForm: {
        goods_name: "",
        goods_price: 0,
        goods_number: 0,
        goods_weight: 0,
        goods_introduce: "",
        goods_cat: "1,2,3",
        pics: [],
        attrs: [],
      },
      id: "",
      rules: {
        goods_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      dialogVisible: false,
    };
  },
  created() {
    this.commodity();
  },
  methods: {
    async commodity() {
      //渲染数据 商品列表
      const res = await Goodslist(this.Goods);
      console.log(res);
      this.commoditylist = res.goods;
      this.total = res.total;
    },
    handleSizeChange(val) {
      this.Goods.pagesize = val;
      this.commodity();
    },
    handleCurrentChange(val) {
      this.Goods.pagenum = val;
      this.commodity();
    },
    // 如果不加防抖每输入一次，就请求一次接口；频繁请求，降低性能
    onearch: _.throttle(function () {
      this.commodity();
    }, 2000),
    // async onearch() {
    //   //搜索
    //   console.log(this.Goods.query);
    //   this.commodity();
    // },
    onClickAdd() {
      //跳转填写信息页面
      this.$router.push("/add");
    },
    // 删除
    async onClickRemove(row) {
      console.log(row);
      const id = row.goods_id;
      console.log(id);
      const res = await DeleteGoods(id);
      console.log(res);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.commodity();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    edit(row) {
      this.dialogVisible = true;
      this.addForm.goods_name = row.goods_name;
      this.addForm.goods_price = row.goods_price;
      this.addForm.goods_number = row.goods_number;
      this.addForm.goods_weight = row.goods_weight;
      // console.log(row);
      this.id = row.goods_id;
    },
    async ConfirmEdit() {
      console.log(this.id);
      let id = this.id;
      console.log(typeof id);
      const res = await EditGoods(id, this.addForm);
      console.log(res);
      this.commodity();
      this.dialogVisible = false;
      this.$message({
        type: "success",
        message: "修改成功!",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input_box {
  width: 100%;
  height: 40px;
  // background-color: rebeccapurple;
  display: flex;
  justify-content: flex-start;
  .in {
    width: 346px;
  }
}
.button {
  .el-button {
    border-radius: 0px !important;
    background-color: #f5f7fa;
  }
}
.add {
  margin-left: 10px;
}
.table {
  margin-top: 15px;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.time {
  font-size: 10px;
}
</style>